<template>
  <view class="container">
    <button
      type="primary"
      :loading="loading"
      open-type="getPhoneNumber"
      @getphonenumber="getPhoneNumber"
    >
      微信一键登录
    </button>

    <button
      type="primary"
      :loading="mpLoading"
      @click="handleMpLogin"
			style="margin-top: 20rpx;"
    >
      微信公众号登录
    </button>
  </view>
</template>

<script>
// 获取code
function getCode() {
  return new Promise((resolve, reject) => {
    uni.login({
      provider: "weixin",
      success: (res) => {
        resolve(res.code)
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

export default {
  data() {
    return {
      loading: false,
      mpLoading: false
    }
  },
  methods: {
    // 微信获取手机号登录
    async getPhoneNumber(e) {
      if (this.loading) return
      this.loading = true

      try {
        // 获取登录code
        const code = await getCode()

        if (e.detail.errMsg === "getPhoneNumber:ok") {
          // 获取手机号成功
          const { encryptedData, iv } = e.detail

          // 这里可以将code、encryptedData和iv发送到后端
          // 后端通过微信服务端接口解密获取手机号
          console.log("登录参数：", {
            code,
            encryptedData,
            iv
          })

          // 模拟登录成功
          uni.showToast({
            title: "登录成功",
            icon: "success"
          })

          // 存储登录状态
          uni.setStorageSync("isLogin", true)

          // 跳转到首页
          //   setTimeout(() => {
          //     uni.switchTab({
          //       url: '/pages/home/home'
          //     })
          //   }, 1500)
        } else {
          // 用户拒绝授权
          uni.showToast({
            title: "需要授权手机号才能登录",
            icon: "none"
          })
        }
      } catch (error) {
        console.error("登录失败：", error)
        uni.showToast({
          title: "登录失败，请重试",
          icon: "none"
        })
      } finally {
        this.loading = false
      }
    },

    // 微信公众号登录
    async handleMpLogin() {
      if (this.mpLoading) return
      this.mpLoading = true

      try {
        // 获取登录code
        const code = await getCode()

        // 获取用户信息
        const userInfo = await new Promise((resolve, reject) => {
          uni.getUserInfo({
            provider: 'weixin',
            success: (res) => {
              resolve(res.userInfo)
            },
            fail: (err) => {
              reject(err)
            }
          })
        })

        // 这里可以将code和用户信息发送到后端
        console.log('微信公众号登录参数：', {
          code,
          userInfo
        })

        // 模拟登录成功
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })

        // 存储用户信息和登录状态
        uni.setStorageSync('userInfo', userInfo)
        uni.setStorageSync('isLogin', true)

        // 跳转到首页
        // setTimeout(() => {
        //   uni.switchTab({
        //     url: '/pages/home/home'
        //   })
        // }, 1500)
      } catch (error) {
        console.error('登录失败：', error)
        uni.showToast({
          title: '登录失败，请重试',
          icon: 'none'
        })
      } finally {
        this.mpLoading = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 30rpx;
}
</style>
